// check for click or enter/space keypress

function a11yClick(event) {
    if (event.type === 'click' || event.type === 'mouseover') {
        return true
    } else if (event.type === 'keypress') {
        var code = event.charCode || event.keyCode
        if ((code === 32) || (code === 13)) {
            return true
        }
    } else {
        return false
    }
}

// modal window

$(function () {
    $.each($('.modal-trigger'), function () {
        var $modal = $(this)
        var $modalID = $modal.data('id')
        var $modalOverlay = $('.modal-overlay')
        var $modalTitle = $('.modal-title')

        if ($modal.length) {
            $modal.on('keypress click', function (event) {
                if (a11yClick(event) === true) {
                    event.preventDefault()
                    $modalOverlay.fadeIn()
                    $('#' + $modalID).fadeIn()
                    $modalTitle.focus()
                }
            })

            $('.close-modal, .modal-overlay').on('keypress click', function (event) {
                event.preventDefault()
                if (a11yClick(event) === true) {
                    hideModal()
                }
            })
        }

        function hideModal() {
            $('#' + $modalID).fadeOut()
            $modalOverlay.fadeOut()
        }
    })
})
// carousel

$(function() {
    // Get Window Dimensions
    let w = window
    let d = document
    let e = d.documentElement
    let g = d.getElementsByTagName('body')[0]
    let x = w.innerWidth || e.clientWidth || g.clientWidth

    $.each($('.slide-container'), function () {
        let $slideContainer = $(this)
        let $containerWidth = $slideContainer.parent('.jquery-carousel').width()
        let $slides = $(this).children('.slide')
        let $nav = $(this).siblings('.slide-nav')
        let $arrows = $(this).parent().children('.slide-arrows')
        let $next = $(this).parent().children('.slide-arrows').children('.arrow-next')
        let $prev = $(this).parent().children('.slide-arrows').children('.arrow-prev')
        let $numberOfSlides = $(this).children('.slide').length

        // check data attributes
        // slides per page
        let $slidesPerPage = 1
        if (typeof $slideContainer.data('slides-per-page') !== 'undefined') {
            $slidesPerPage = $slideContainer.data('slides-per-page')
        }

        // slides on mobile
        let $slidesOnMobile = $slidesPerPage
        if (typeof $slideContainer.data('slides-on-mobile') !== 'undefined') {
            $slidesOnMobile = $slideContainer.data('slides-on-mobile')
        }

        // gutters
        let $gutters = 0
        if (typeof $slideContainer.data('gutters') !== 'undefined') {
            $gutters = $slideContainer.data('gutters')
        }

        // mobile breakpoint
        let $breakpoint = 768
        if (typeof $slideContainer.data('breakpoint') !== 'undefined') {
            $breakpoint = $slideContainer.data('breakpoint')
        }
        if (x <= $breakpoint) {
            $slidesPerPage = $slidesOnMobile
        }

        // set gutters to 0 if only 1 slide is shown per page
        if ($slidesPerPage === 1) $gutters = 0

        // set the width of the slide container
        $slideContainer.css('width', ($numberOfSlides * $containerWidth + 'px'))

        // set the width of the slides
        $slides.css('width', (($containerWidth / $slidesPerPage)) + 'px')
        $slides.css('padding', '0 ' + $gutters + 'px')

        // set the height of the arrows div
        $arrows.css('height', $slideContainer.height())

        // set first slide as active
        $slideContainer.children('.slide:nth-child(1)').addClass('active')
        let $activeSlideIndex = 0

        // dot navigation
        if ($slidesPerPage < $numberOfSlides) {
            for (let a = 0; a < $numberOfSlides / $slidesPerPage; a++) {
                $nav.append('<a href="javascript: void(0);" class="slide-nav-dot' + (a === 0 ? ' active' : '') + '"></a>')
            }
        }
        $nav.children('.slide-nav-dot').click(function () {
            goToSlide($(this).index())
        })

        // arrow navigation
        $next.click(function () {
            if ($activeSlideIndex < (($numberOfSlides / $slidesPerPage) - 1)) 
              { goToSlide($activeSlideIndex + 1) }
           else {
               goToSlide($activeSlideIndex = 0)
            }
        })
        $prev.click(function () {
            if ($activeSlideIndex > 0) goToSlide($activeSlideIndex - 1)
        })

        // go to slide when a dot is clicked
        function goToSlide (target) {
         
            let $dots = $nav.children('a')
            $slides.removeClass('active')
            $slideContainer.children('.slide:nth-child(' + (target + 1) + ')').addClass('active')
            let $marginLeft = target * $containerWidth

            // if it's the last page, make sure the last slide is flush right in the container
            if (target + 1 >= $numberOfSlides / $slidesPerPage) {
                $marginLeft = ($containerWidth * ($numberOfSlides / $slidesPerPage)) - $containerWidth
            }

            $slideContainer.css('margin-left', '-' + $marginLeft + 'px')
            $dots.removeClass('active')
            $dots.eq(target).addClass('active')
            $activeSlideIndex = $slideContainer.children('.active').index()
        }
    })
})

// mega menu

let $breakpoint = 1240

function initMegaMenu () {
    let megaMenu = document.getElementById('mega-menu')

    // keyboard stuff
    $(megaMenu).delegate('li a', 'keydown', keyboardHandler)

    // mouse stuff
    $('.has-drop').each(function () {
        if (!$(this).hasClass('find-a-location-list-item')) {

            $(this).click(function () {
              
                if ($(this).hasClass('active')) {

                    closeDropdown($(this).children('.mega-menu-link'));

                } else {
                    openDropdown($(this).children('.mega-menu-link'));
                }
            }
            );
        }
    }
    );

    $('.find-a-location-list-item').on('click', function (e) {
      
        if ($(this).hasClass('active')) {
            //closeDropdown($(this).children('.mega-menu-link'));

        } else {
            openDropdown($(this).children('.mega-menu-link'));
        }
    });

    $(".nav-location-close-icon").on('click', function (e) {
        event.stopImmediatePropagation();
       
        $listItem = $('.find-a-location-list-item');
       
        closeDropdown($listItem.children('.mega-menu-link'));

    });

    // mobile menu
    $('#mobile-menu').on('click', function (e) {
        $(this).toggleClass('open')
    })
}

function keyboardHandler (keyVent) {
    let target = keyVent.target
    let which = keyVent.which

    if (which === 39) { // RIGHT
        if (isTopLevel(target)) {
            // top level item
            let nextTopItem = adjacentTopLevelItem(target, 'next')

            if (nextTopItem) {
                keyVent.preventDefault()
                nextTopItem.focus()
            }
        } else {
            // dropdown item
            let nextDropletItem = adjacentDropdownItem(target, 'next')
            if (nextDropletItem) {
                keyVent.preventDefault()
                nextDropletItem.focus()
            }
        }
    } else if (which === 37) { // LEFT
        if (isTopLevel(target)) {
            // top level item
            let prevTopItem = adjacentTopLevelItem(target, 'prev')

            if (prevTopItem) {
                keyVent.preventDefault()
                prevTopItem.focus()
            }
        } else {
            // dropdown item
            let prevDropItem = adjacentDropdownItem(target, 'prev')
            if (prevDropItem) {
                keyVent.preventDefault()
                prevDropItem.focus()
            }
        }
    } else if (which === 40) { // DOWN
        if (isTopLevel(target) && hasDropdown(target)) {
            // top level item w/ dropdown -- open dropdown
            openDropdown(target)
        } else {
            // dropdown item
            let nextDropItem = adjacentDropdownItem(target, 'next')

            if (nextDropItem) {
                keyVent.preventDefault()
                nextDropItem.focus()
            }
        }
    } else if (which === 38) { // UP
        if (!isTopLevel(target)) {
            if (isFirstDropItem(target)) {
                keyVent.preventDefault()
                let top = closeDropdown(target)
                setTimeout(function () {
                    top.focus()
                }, 0)
            } else {
                let prevDropAnchor = adjacentDropdownItem(target, 'prev')

                if (prevDropAnchor) {
                    keyVent.preventDefault()
                    prevDropAnchor.focus()
                }
            }
        }
    } else if (which === 27) { // ESCAPE
        if (!isTopLevel(target)) {
            closeDropdown(target)
            let droplet = $(target).closest('.droplet')[0]
            let topItem = $(droplet).prev()[0]
            setTimeout(function () {
                topItem.focus()
            }, 0)
        }
    } else if (which === 9 && keyVent.shiftKey) { // SHIFT + TAB
        if (!isTopLevel(target) && isFirstDropItem(target)) {
            keyVent.preventDefault()
            closeDropdown(target)
            let droplet = $(target).closest('.droplet')[0]
            let topItem = $(droplet).prev()[0]
            setTimeout(function () {
                topItem.focus()
            }, 0)
        }
    } else if (which === 9) { // TAB
        if (!isTopLevel(target) && isLastDropItem(target)) {
            keyVent.preventDefault()
            closeDropdown(target)
            let droplet = $(target).closest('.droplet')[0]
            let topItem = $(droplet).prev()[0]
            let nextLi = $(topItem.parentNode).next()[0]
            let nextAnchor = $('a', nextLi)[0]
            nextAnchor.focus()
        }
    } else if (which === 13 || which === 32) {
        if (isTopLevel(target) && $(target.parentNode).hasClass('has-drop')) {
            openDropdown(target)
        }
    }
}

// determines if the item is a top-level one
function isTopLevel (item) {
    return $(item).is('#mega-menu > li > a')
}

// determines if the item has a dropdown
function hasDropdown (item) {
    return $(item.parentNode).hasClass('has-drop')
}

// determines if the item is the first in the dropdown
function isFirstDropItem (item) {
    let drop = $(item).closest('.droplet')[0]
    let firstInDrop = $('li a', drop)[0]
    return firstInDrop === item
}

// determines if the item is the last in the dropdown
function isLastDropItem (item) {
    let drop = $(item).closest('.droplet')[0]
    let lastInDrop = $('li a', drop).last()[0]
    return lastInDrop === item
}

// finds the adjacent top level item
function adjacentTopLevelItem (item, dir) {
    let li = item.parentNode // <li />
    let adjacentLi = (dir === 'next') ? $(li).next()[0] : $(li).prev()[0]
    return adjacentLi && $('a', adjacentLi)[0]
}

// finds the next or prev dropdown item
function adjacentDropdownItem (item, dir) {
    let adjacentDropItem
    let li = item.parentNode
    let adjacentSameCol = (dir === 'next') ? $(li).next()[0] : $(li).prev()[0]
    if (adjacentSameCol) {
        // there is one in the same col
        adjacentDropItem = $('a', adjacentSameCol)[0]
    } else {
        // lets look for one in the adjacent column
        let col = $(li).closest('.col')[0]
        let adjacentCol = (dir === 'next') ? $(col).next()[0] : $(col).prev()[0]
        if (adjacentCol) {
            // we've found the adjacent column
            let adjacentItem = (dir === 'next') ? $('li a', adjacentCol)[0] : $('li a', adjacentCol).last()[0]
            if (adjacentItem) {
                adjacentDropItem = adjacentItem
            }
        }
    }
    return adjacentDropItem
}

function openDropdown (item) {
    let droplet = $(item).next()[0]
    $('.has-drop').removeClass('active')
    if ($(window).width() < $breakpoint) {
        $('.droplet').removeClass('active')
        $(droplet).addClass('active')
        $(item).parent().delay(500).addClass('active')
        //$('#mobile-menu').hide()
    } else {
        $('.droplet').slideUp(100)
        $(droplet).slideDown(100)
        $(item).parent().addClass('active')
    }
}

function closeDropdown (item) {
    let droplet = $(item).next()
    if ($(window).width() < $breakpoint) {
        $(droplet).removeClass('active')
        //$('#mobile-menu').show()
    } else {
        $(droplet).slideUp(100)
    }
    $(item).parent().removeClass('active')
}

$(document).ready(initMegaMenu)

// add/remove sticky class to the nav after the user has scrolled down
$(window).scroll(function () {
    if ($(this).scrollTop() > 0) {
        $('nav, .local-utility-nav').addClass('sticky')
    } else {
        $('nav, .local-utility-nav').removeClass('sticky')
    }
})

// count up

$(function () {
    if ($('.stats').length > 0) {
        $(window).scroll(function () {
            function elementScrolled(elem) {
                let docViewTop = $(window).scrollTop()
                let docViewBottom = docViewTop + $(window).height()
                let elemTop = $(elem).offset().top
                return ((elemTop <= docViewBottom) && (elemTop >= docViewTop))
            }

            if (elementScrolled('.counter')) {
                $('.counter').each(function () {
                    let $this = $(this);
                    let countTo = $this.attr('data-count');                   
                    if ($this.data("count") != $this.text().replace(',', '')) {
                        $({ countNum: $this.text() }).animate({
                            countNum: countTo
                        },
                            {
                                duration: 2500,
                                easing: 'linear',
                                step: function () {
                                    $this.text(Math.floor(this.countNum))
                                },
                                complete: function () {
                                    $this.text(this.countNum.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,'))
                                }
                            })
                    }

                })

            }
        })
    }
})

// font size


$(function () {
    let $body = $('body')
    let $plus = $('.change-text-size > .plus')
    let $minus = $('.change-text-size > .minus')

    $plus.click(function () {
        if ($body.hasClass('medium-size')) {
            $body.removeClass().addClass('large-size')
            $minus.removeClass('inactive')
            $plus.addClass('inactive')
        } else {
            $body.removeClass().addClass('medium-size')
            $minus.removeClass('inactive')
            $plus.removeClass('inactive')
        }
    })
    $minus.click(function () {
        if ($body.hasClass('large-size')) {
            $body.removeClass().addClass('medium-size')
            $plus.removeClass('inactive')
            $minus.removeClass('inactive')
        } else {
            $body.removeClass()
            $plus.removeClass('inactive')
            $minus.addClass('inactive')
        }
    })
})